<script setup>
import { ref, watch, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import microApp from "@micro-zoe/micro-app";
import defaultSetting from "@/common/utils/defaultSetting.js";

const route = useRoute();

const baseRoute = ref("/workShotstack/reply");
// const baseRoute = ref("/workShotstack/matrixMarketing/reply");

const connectUrl = computed(() => {
   return defaultSetting.replyUrl + '/reply/'
});
const changeRouteData = computed(() => {
  return {
    event: "changeRoute",
    data: {
      fullPath: route.fullPath.replace(baseRoute.value, ""),
      path: route.path.replace(baseRoute.value, ""),
      query: route.query,
    },
  };
});

const microData = computed(() => {
  return {
    app_name: import.meta.env.VITE_APP_SHORT_NAME,
    app_url: defaultSetting.baseUrl,
    cur_env: import.meta.env.ELECTRON ? "desktop" : "pc",
    ...changeRouteData.value,
  };
});
onMounted(() => {
  // 案例一
  microApp
    .renderApp({
      name: "comment-message",
      url: connectUrl.value,
      "router-mode": "native",
      baseroute: baseRoute.value,
      // baseroute: "baseRoute",
      iframe: true,
      "keep-alive": true,
      data: microData.value,
      container: "#workShotstack",
    })
    .then((result) => {
      if (result) {
        console.log("渲染成功");
      } else {
        console.log("渲染失败");
      }
    });
});
watch(
  () => route.path,
  () => {
    microApp.setData("comment-message", changeRouteData.value);
  }
);
</script>

<template>
  <div class="micro-app">
    <div class="micro-page">
      <!-- {{  microData }} -->
      <!-- <micro-app
        name='comment-message'
        :url='connectUrl'
        router-mode='native'
        :baseroute="baseRoute"
        iframe
        keep-alive
        :data="microData"
      ></micro-app> -->
      <div id="workShotstack"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.micro-app {
  position: absolute;
  top: 1px;
  left: 0px;
  width: 100%;
  height: calc(100% - 1px);

  .micro-page {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>
